<template>
  <div  class="news_content">
    <div  id="introduct">
      <div  id="description">
        <div  class="new-content-title-wrapper">
          <div  class="new-content-title">平台概述</div>
          <div  class="new-content-line"></div>
        </div>
        <div  class="description__wrapper">
          <p  class="description__content">
            自然资源卫星遥感云服务平台以云计算环境为支撑，以多平台、多时相、多尺度、多层次卫星影像产品为资源，以实时推送、管理和分发自然资源陆地为主的国产遥感卫星影像产品为主要任务，其目的是构建全球虚拟卫星影像数据服务中心，实现自然资源国产高分辨陆地卫星影像产品在国内、国际自然资源管理及各行业的即时共享和高效利用，满足自然资源管理与卫星遥感影像全球对地观测需求。
          </p>
          <div  class="description__image"><img  src="http://sasclouds.com//chinese/img/1@2x.db29b1ce.png" alt=""></div>
        </div>
      </div>
      <div  id="service" class="service" >
        <div  class="new-content-title-wrapper">
          <div  class="new-content-title">用户分级</div>
          <div  class="new-content-line"></div>
        </div>
        <div  class="service_wrapper">
          <div  class="service_image"><img  src="http://sasclouds.com//chinese/img/2@2x.d9e39817.png" alt=""></div>
        </div>
      </div>
      <div  id="feature" >
        <div class="new-content-title-wrapper">
          <div class="new-content-title">典型应用</div>
          <div class="new-content-line"></div>
        </div>
        <div  class="feature_image"><img  src="http://sasclouds.com//chinese/img/3@2x.a1c5e41d.png" alt=""></div>
      </div>
    </div>
    <a-back-top />  
  </div>
</template>
<script>
import Bus from '../../src/bus.js';
import $ from 'jquery';
  export default {
    components: {

    },
    data() {
      return {
        
      }
    },
    mounted() {
      Bus.$on('news_template_side_click', (path) => {
        this.anchor(path);
      })
    },
    methods:{
      anchor(id){
        let el=$('#'+id)
        let top=el.offset().top;
        let scrollTop=$(document).scrollTop();
        this.scrollTop(window,scrollTop,top)
      },
      scrollTop(el, from = 0, to, duration = 500, endCallback) {
        if (!window.requestAnimationFrame) {
            window.requestAnimationFrame = (
                window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.msRequestAnimationFrame ||
                function (callback) {
                    return window.setTimeout(callback, 1000/60);
                }
            );
        }
        const difference = Math.abs(from - to);
        const step = Math.ceil(difference / duration * 50);

        function scroll(start, end, step) {
            if (start === end) {
                endCallback && endCallback();
                return;
            }

            let d = (start + step > end) ? end : start + step;
            if (start > end) {
                d = (start - step < end) ? end : start - step;
            }

            if (el === window) {
                window.scrollTo(d, d);
            } else {
                el.scrollTop = d;
            }
            window.requestAnimationFrame(() => scroll(d, end, step));
        }
        scroll(from, to, step);
      },
    }
  }
</script>